    <template>
        <div class="prescriptionIssuance">
            <div class="top">
                <div class="left-top">
                    医生名称： <el-input v-model="doctorInp" style="width: 200px;margin-right: 20px;" size="small"
                        placeholder="林" />
                    处方开具科室： <el-input v-model="roomInp" style="width: 200px;margin-right: 20px;" size="small"
                        placeholder="林" />
                    <el-button :icon="Search" type="primary" @click="serchBtn">查询</el-button>
                </div>
                <div class="right-top" @click="delSelectChange"><el-button>删除选中</el-button></div>
            </div>
            <el-table :data="tableData" stripe style="width: 100%" @selection-change="selectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="医生头像" width="80">
                    <template #default="scope">
                        <img :src=scope.row.head>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="医生名字" />
                <el-table-column prop="department" label="处方开具科室" />
                <el-table-column prop="price" label="处方金额" />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button @click="seeBtn(scope.row.id)" type="danger" :icon="Edit"></el-button>
                        <el-button @click="delBtn(scope.row.id)" type="danger" :icon="Delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination v-model:current-page="pageDate.page" v-model:page-size="pageDate.size"
                :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
                <!-- <template #default="total">
    23456
                </template> -->
            </el-pagination>
            <!-- 查看处方详情 -->
            <el-dialog v-model="dialogBol" title="处方详情" width="80%">
                <el-table :data="detailsData.recipel" stripe style="width: 100%">
                    <el-table-column prop="drugsname" label="药品名称" />
                    <el-table-column label="药品图" width="80">
                        <template #default="scope">
                            <img :src=scope.row.img>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="规格" />
                    <el-table-column prop="price" label="单价" />
                    <el-table-column prop="count" label="数量" />
                    <el-table-column prop="endtime" label="有效期" width="180" />
                </el-table>
                <template #footer>
                    <p style="margin-left: 30px;">总价：{{detailsData.price  }}</p>
                </template>
            </el-dialog>
        </div>
    </template>

    <script setup lang="ts">
    import qs from 'qs'
    import { useStore } from 'vuex'
    import { ref, reactive, computed, watchEffect, watch, nextTick } from 'vue'
    import {
        Search, Delete, Edit
    } from '@element-plus/icons-vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import type { Action } from 'element-plus'
    import { recipelInfobyid, recipelDel, recipelBatchdel } from '../../../api/medicalFrontline/medicalFrontlineApi'
    const doctorInp = ref('滴')
    const roomInp = ref('滴')
    const visible = ref(false)
    const serchBtn = () => {
        console.log('addInput', doctorInp.value, roomInp.value);
    }
    // 获取全科室处方列表 板块
    const store = useStore()
    let tableData = computed<any>(() => {
        console.log(store.state.zt.recipelList);
        return store.state.zt.recipelList
    })
    // 页数
    let pageDate = reactive({
        size: 5,
        page: 1,
    })
    let total = computed(() => {
        return store.state.zt.total
    })

    watch(pageDate, (newVal, oldVal) => {
        console.log(newVal, oldVal);
        // 获取全科室处方列表
        store.dispatch('zt/A_recipelList', newVal)
    }, {
        deep: true,
        immediate: true
    })
    // 封装删除确认提示组件提示 del为删除--请求接口
    const delMesFn = (delFn) => {
        ElMessageBox.confirm(
            '您正在删除处方药品，此操作不可逆，确定删除吗',
            '系统提示',
            {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                delFn()

                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                // 获取全科室处方列表
                store.dispatch('zt/A_recipelList', pageDate)
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    }
    // 选择处方相关
    // 选择药品
    let selectList = ref([])
    const selectionChange = (selection) => {
        console.log(selection);
        selectList.value = selection
    }
    // 批量删除处方
    const delSelectChange = () => {
        if (JSON.stringify(selectList.value) == "[]") {
            ElMessage.error('请选择需要删除的处方')
        } else {
            delMesFn(async () => {
                console.log('批量删除---掉接口', selectList.value);
                // 获取ids
                let ids = selectList.value.map((v) => {
                    let idsArr = []
                    idsArr.unshift(v.id)
                    return idsArr
                })
                let idsStr = `[` + ids.toString() + `]`
                console.log(idsStr);

                // console.log('批量删除---掉接口', ids);

                let res = await recipelBatchdel({ ids: idsStr })
                console.log(res);
                // 请求数据
                store.dispatch('zt/A_recipelList', pageDate)
            })

        }

    }
    // page相关
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
        pageDate.size = val
    }
    const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
        pageDate.page = val

    }
    // 查看处方详情与单个删除
    // 处方详情
    let detailsData: any = reactive({
        recipel: [],
        price: 0
    })
    // 处方详情dialog
    let dialogBol = ref(false)
    // 查看处方详情
    const seeBtn = async (id) => {

        let res = await recipelInfobyid({ id })
        console.log(qs.parse(res.data.data[0].recipel));
        // 
        let recipelObj = qs.parse(res.data.data[0].recipel)
        console.log('特殊的obj', recipelObj);

        for (const key in recipelObj) {
            detailsData.recipel[key] = recipelObj[key]
        }
        console.log('将特殊的obj====》》数组', recipelObj);

        // console.log('arr',Object.values(qs.parse(res.data.data[0].recipel)[0]) );

        // detailsData.recipel =Object.values(qs.parse(res.data.data[0].recipel)[0]) 
        // console.log('detailsData.recipel', detailsData.recipel);

        detailsData.price = res.data.data[0].price
        nextTick(() => {
            // 打开处方详情dialog
            dialogBol.value = true
        })
    }
    // 单个删除
    const delBtn = (id) => {

        ElMessageBox.confirm(
            '您正在删除处方药品，此操作不可逆，确定删除吗',
            '系统提示',
            {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                console.log("调接口", id);
                let res = await recipelDel({ id })
                console.log(res.data);

                nextTick(() => {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    // 获取全科室处方列表
                    store.dispatch('zt/A_recipelList', pageDate)
                })

            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    }
    </script>

    <style scoped>
    .prescriptionIssuance {
        padding: 20px;
    }

    .top {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }

    .is-leaf {
        background: rgb(175, 149, 149);
    }

    /* 弹窗 */
    .el-message-box__btns {
        display: flex;
        justify-content: space-between !important;
    }

    img {
        width: 80px;
        height: 80px;
    }
    </style>